<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 120px;
  line-height: 130px;
  text-align: center;
}

.bodyDiv {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.el-page-header__title {
  color: #FF8400;
  font-size: 20px;
  font-weight: bolder;
}
.el-page-header__content {
  font-weight: bold;
  color: #409EFF;
  font-size: 21px;
}
</style>

<template>
  <div class="bodyDiv">
    <el-card style="width: 1200px;height:auto;margin: 0 auto;">
      <div style="width: 1155px;height:455px;margin: 0 auto;padding-top: -5px">
        <el-page-header @back="goBack" content="发布返乡报备">
        </el-page-header>
        <div style="margin: 7px 0 7px 0">
          <el-divider></el-divider>
        </div>

        <!--    发布报备表单    -->
        <el-form :inline="true" :model="reportAddNew" :rules="rules" ref="reportAddNew" class="demo-form-inline">
          <el-form-item prop="startPlace" label="出发地点">
            <el-input style="width: 450px;margin-right: 190px" v-model="reportAddNew.startPlace"
                      placeholder="请填写正确的出发地点！例如x省x市x区x县x道x路x街"></el-input>
          </el-form-item>
          <el-form-item prop="returnDate" label="返乡时间">
            <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="reportAddNew.returnDate"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="bodyStatus" style="margin-top: 15px"  label="身体状态">
            <el-input style="width: 450px;margin-right: 190px" v-model="reportAddNew.bodyStatus"
                      placeholder="请输入身体状态！"></el-input>
          </el-form-item>
          <el-form-item prop="temperature" style="margin-top: 15px" label="体温">
            <el-input v-model="reportAddNew.temperature" placeholder="请输入35-45之间的摄氏度！"></el-input>
          </el-form-item>
          <el-form-item prop="halfMonthPast" style="margin-top: 15px" label="近十五天轨迹">
            <el-input style="width: 422px;margin-right: 190px" v-model="reportAddNew.halfMonthPast"
                      placeholder="请输入近十五天的轨迹！"></el-input>
          </el-form-item>
          <el-form-item prop="throughDangerArea" style="margin-top: 15px" label="经过疫区">
            <el-input style="width: 300px;" v-model="reportAddNew.throughDangerArea"
                      placeholder="请输入经过疫区地名！没有则填写'无'"></el-input>
          </el-form-item>

          <!--     核酸检测截图     -->
          <el-form-item prop="nucleicReport" style="margin-top: 20px" label="核酸检测">
            <el-upload
                :on-remove="handleRemove"
                :limit="1"
                list-type="picture-card"
                style="text-align: left;"
                class="avatar-uploader"
                action="http://localhost:8080/user/upload"
                :on-success="handleSuccess"
                :before-upload="beforeAvatarUpload">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item style="margin-top: 127px;margin-left: 500px">
            <el-button style="border-radius: 30px" @click="resetForm('reportAddNew')">重置</el-button>
            <el-button type="danger" round @click="addNew('reportAddNew')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      rules: {
        startPlace: [
          {required: true, message: '请填写正确的出发地点！例如x省x市x区x县x道x路x街', trigger: 'blur'},
        ],
        returnDate: [
          {required: true, message: '请选择返乡时间', trigger: 'blur'},
        ],
        temperature: [
          {required: true, message: '请输入35-45之间的摄氏度！', trigger: 'blur'},
        ],
        bodyStatus: [
          {required: true, message: '请输入1-40个字符的身体状态！', trigger: 'blur'},
        ],
        halfMonthPast: [
          {required: true, message: '请输入1-50个字符的近十五天轨迹！', trigger: 'blur'},
        ],
        nucleicReport: [
          {required: true, message: '请上传核酸检测截图', trigger: 'blur'},
        ],
        throughDangerArea: [
          {required: true, message: '请输入1-40个字符的经过疫区地名！没有则填写\'无\'', trigger: 'blur'},
        ],
      },
      reportAddNew: {
        startPlace:'',
        returnDate:'',
        temperature:'',
        bodyStatus:'',
        halfMonthPast:'',
        nucleicReport:'',
        throughDangerArea:'',
      },
    }
  },
  methods: {
    //执行添加报背
    addNew(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/returnHome/insert';
          console.log('执行添加报备的URL = ' + url);
          let formData = this.qs.stringify(this.reportAddNew);
          console.log('formData = ' + formData);

          let userJwt = localStorage.getItem('userJwt');
          this.axios.create({'headers': {'Authorization': userJwt}})
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$notify.success({
                title: '提示',
                message: "添加返乡报备成功！",
                showClose: true,
                position: 'top-right'
              });
              this.$router.push('/sys-user/returnHome');
            } else {
              this.$notify.warning({
                title: '提示',
                message: responseBody.message,
                showClose: false,
                position: 'top-right'
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //撤销上传图片
    handleRemove(file, fileList) {
      console.log("需要移除的文件是" + file, fileList);
      console.log("需要移除的uuid值是" + file.response);
      let url = 'http://localhost:8080/user/uploadDelete/uuid=' + file.response;
      console.log('执行图片撤销的请求路径是：' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify.success({
            title: '提示',
            message: '撤销图片成功！',
            showClose: true,
            position: 'top-right'
          });
          this.reportAddNew.nucleicReport = '';
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      });
    },

    handleSuccess(response) {
      console.log(response);
      this.reportAddNew.nucleicReport = response;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    //返回报备列表
    goBack() {
      this.$router.push('/sys-user/returnHome');
    },
    //清空添加输入框
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {

  }
}
</script>